<template>
  <div class="inspect-head">
    <div class="inspect-head-select" @click="showPopup = true">
      <span>{{ gridName }}</span>
      <van-icon name="arrow-down" />
    </div>
    <div class="inspect-head-type">
      <template v-if="$route.path === `/inspectvisit/inspect/${type}/map`">
        <img
          src="@/assets/images/inspectVisit/inspect/icon_list@2x.png"
          alt=""
          @click="
            $router.replace({
              path: `/inspectvisit/inspect/${type}/list`,
              query: { ...$route.query, gridCode }
            })
          "
        />
      </template>
      <template v-if="$route.path === `/inspectvisit/inspect/${type}/list`">
        <img
          src="@/assets/images/inspectVisit/inspect/icon_map@2x.png"
          alt=""
          @click="
            $router.replace({
              path: `/inspectvisit/inspect/${type}/map`,
              query: { ...$route.query, gridCode }
            })
          "
        />
      </template>
    </div>
    <van-popup v-model="showPopup" round position="bottom">
      <van-picker
        show-toolbar
        :default-index="gridData.findIndex(o => o.gridCode === gridCode)"
        :columns="gridData"
        value-key="gridName"
        @cancel="showPopup = false"
        @confirm="onConfirm"
      />
    </van-popup>
  </div>
</template>
<script>
import InspectVisit from '@/api/inspectVisit'
export default {
  model: {
    prop: 'code',
    event: 'change'
  },
  props: {
    type: {
      type: String
    },
    code: {
      type: String,
      default: ''
    },
    appCode: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      gridData: [],
      gridCode: '',
      gridName: '',
      gridItem: {},
      showPopup: false
    }
  },
  created() {
    if (this.appCode) {
      this.getApp()
    } else {
      this.getGrid()
    }
  },
  watch: {
    gridCode() {
      this.$emit('change', this.gridCode, this.gridItem)
    }
  },
  methods: {
    getApp() {
      const params = {
        appCode: this.appCode
      }
      InspectVisit.Init.gridApp(params).then(res => {
        const { status, data } = res.data
        if (status === 0) {
          this.gridData = data
          if (this.gridData.length) {
            // 获取巡查中网格(默认显示正在巡查中网格，否则显示第一个网格)
            const index = this.gridData.findIndex(o => o.inspectionState === '1')
            let item = index > -1 ? this.gridData[index] : this.gridData[0]
            if (this.code) {
              item = this.gridData.find(o => o.gridCode === this.code)
            }
            this.gridName = item.gridName
            this.gridCode = item.gridCode
            this.gridItem = item
          }
        }
      })
    },
    getGrid() {
      InspectVisit.Init.grid().then(res => {
        const { status, data } = res.data
        if (status === 0) {
          this.gridData = data
          if (this.gridData.length) {
            // 获取巡查中网格(默认显示正在巡查中网格，否则显示第一个网格)
            const index = this.gridData.findIndex(o => o.inspectionState === '1')
            let item = index > -1 ? this.gridData[index] : this.gridData[0]
            if (this.code) {
              item = this.gridData.find(o => o.gridCode === this.code)
            }
            this.gridName = item.gridName
            this.gridCode = item.gridCode
            this.gridItem = item
          }
        }
      })
    },
    onConfirm(item) {
      this.gridName = item.gridName
      this.gridCode = item.gridCode
      this.gridItem = item
      this.showPopup = false
    }
  }
}
</script>
<style scope lang="less">
.inspect-head {
  position: relative;
  padding: 16px 32px;
  z-index: 3000;
  &-select {
    height: 88px;
    padding-left: 22px;
    margin-right: 92px;
    font-size: 32px;
    line-height: 88px;
    background: #ffffff;
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    .van-icon {
      float: right;
      margin-right: 16px;
      line-height: 44px;
      color: rgba(0, 0, 0, 0.54);
    }
  }
  &-type {
    position: absolute;
    top: 0;
    right: 0;
    img {
      width: 120px;
    }
  }
}
</style>
